<template>
  <el-image
    :src="imageUrls[0]"
    :preview-src-list="imageUrls"
    :style="`width: ${width}px; height: ${height}px`"
  >
  </el-image>
</template>
<script>
export default {
  name: "ImageViewer",
  props: {
    url: {
      type: [Array, String],
      default: null,
    },
    width: {
      type: Number,
      default: () => 20,
    },
    height: {
      type: Number,
      default: () => 15,
    },
    separators: {
      type: String,
      default: () => ",",
    },
  },
  computed: {
    imageUrls() {
      if (!this.url) return [];
      if (Array.isArray(this.url)) {
        return this.url;
      } else {
        return this.url.split(this.separators);
      }
    },
  },
};
</script>
